<template>
<div>
    <div class="title">精品推荐</div>
    <ul>
        <router-link
        tag="li"
        :to="/detail/ + item.id" 
        class="item border-bottom" 
        v-for="item of list" 
        :key="item.id"
        >
            <img :src="item.imgUrl" alt="">
            <div class="info">
                <p class="ititle">{{item.title}}</p>
                <p class="desc">{{item.desc}}</p>
                <button>查看详情</button>
            </div>
        </router-link>
    </ul>
</div>
  
</template>

<script>
export default {
    name: 'Recommend',
    props: {
        list: Array
    }


}
</script>

<style scoped>
.title{
    height: 0.8rem;
    line-height: 0.8rem;
    text-indent: .2rem;
    background: #eee;
}
.item{
    display: flex;
    height: 2rem;
    /* background: #ddd; */
}
img{
    padding: 0.1rem;
    width: 1.8rem;
    height: 1.8rem;
}
.info{
    flex: 1;
    padding-left: .1rem;
    min-width: 0;
}
.ititle{
    line-height: .6rem;
    font-size: .35rem;
}
.desc{
    margin-top: .1rem;
    line-height: .4rem;
    color: #aaa;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
button{
    margin-top: .2rem;
    padding: .05rem;
    color: #fff;
    background: #ff9300;
    border-radius: .05rem;
}

</style>